/*
  1:歌曲搜索接口
    请求地址:https://autumnfish.cn/search
    请求方法:get
    请求参数:keywords(查询关键字)
    响应内容:歌曲搜索结果
 
  2:歌曲url获取接口
    请求地址:https://autumnfish.cn/song/url
    请求方法:get
    请求参数:id(歌曲id)
    响应内容:歌曲url地址
  3.歌曲详情获取
    请求地址:https://autumnfish.cn/song/detail
    请求方法:get
    请求参数:ids(歌曲id)
    响应内容:歌曲详情(包括封面信息)
  4.热门评论获取
    请求地址:https://autumnfish.cn/comment/hot?type=0
    请求方法:get
    请求参数:id(歌曲id,地址中的type固定为0)
    响应内容:歌曲的热门评论
  5.mv地址获取
    请求地址:https://autumnfish.cn/mv/url
    请求方法:get
    请求参数:id(mvid,为0表示没有mv)
    响应内容:mv的地址
*/

var app = new Vue({
    el:"#player",
    data:{
        // 查询关键字
        query: "",
        // 歌曲数组
        musicList: [],
        // 歌曲地址
        musicUrl: "",
        // 歌曲封面
        musicCover: "https://p3fx.kgimg.com/stdmusic/20191029/20191029163809370047.jpg",
        // 动画播放状态
        isPlaying: false,
        //当前操作的item
        controlItem: 0,
        //当前播放歌曲名
        musicName: "",
        //当前播放歌手名
        musicSinger: "",
        //当前歌曲时长
        musicDuration: "00:00",
        //当前歌曲播放进度
        musicCurrentTime: "00:00",
    },

    methods: {
        // 歌曲搜索
        searchMusic:function(){
            var that = this;
            axios.get("https://autumnfish.cn/search?keywords="+this.query)
            .then(function(response){
                //console.log(response);
                that.musicList = response.data.result.songs;
            },function(err){
                
            })
        },
        // 歌曲播放
        playMusic: function(musicId, index) {
            console.log(musicId);
            var that = this;
            // 获取歌曲地址
            axios.get("https://autumnfish.cn/song/url?id=" + musicId).then(
            function(response) {
                // console.log(response);
                console.log("url="+response.data.data[0].url);
                that.musicUrl = response.data.data[0].url;
                that.controlItem = index; 
                that.musicName = that.musicList[index].name;
                that.musicSinger = that.musicList[index].artists[0].name;
                that.musicDuration = that.transtime(that.musicList[index].duration);
                var that2 = that;
                that.$nextTick(function () {
                  // DOM 更新了
                  console.log("DOM 更新了");
                  that2.control();
                })
            },function(err) {}
            );

            //歌曲详情获取
            axios.get("https://autumnfish.cn/song/detail?ids="+musicId)
            .then(function(response){
              console.log(response.data.songs[0].al.picUrl);
              that.musicCover = response.data.songs[0].al.picUrl;
            },function(err){});
          
        },

        // 歌曲播放
        play: function() {
            console.log("play");
            var audio =document.querySelector('#audio');
            //TODO 发现chrome无效
            try {
              audio.play();
            } catch (err) {
              console.log("error---" + err);
              return;
            }
            this.isPlaying = true;
            that = this;
            var i = 0;
            //进度条
            var playhead = document.querySelector('#playhead'); //滑块
            var progress = document.querySelector('#progress'); //颜色条
            audio.ontimeupdate = function(){
              var percent = audio.currentTime / audio.duration;
              playhead.style = "margin-left: " + 100 * percent + "%";
              progress.style = "width: " + 100 * percent + "%";
              if(i % 4 == 0) {
                that.musicCurrentTime = that.transtime(audio.currentTime*1000);  
                console.log(that.musicCurrentTime);
                i = 0;
              }
              i++;
            };
            audio.addEventListener("ended",function(){
              console.log("ended");
              that.pause();
            });
        },
        // 歌曲暂停
        pause: function() {
            console.log("pause");
            var audio =document.querySelector('#audio');
            audio.pause();
            this.isPlaying = false;
            
        },
        //播放控制
        control: function() {
          if (!this.isPlaying) {
            this.play();
          }else {
            this.pause();
          }
        },
        //转化时间
        transtime: function(ms) {
          min = Math.floor((ms/1000/60)),
          sec = Math.floor((ms/1000) % 60);
          if (min < 10) {
            min = "0" + min;
          }
          if (sec < 10) {
            sec = "0" + sec;
          }
          //console.log(min + ':' + sec);
          return  min + ":"+ sec;
        }
     
    }
})